<template>
	<view>
		<!-- 顶部注册登录/用户名显示区域 -->
		<view class="top-container">
			<u-avatar :src="user.avatar || ''" shape="square" size="52"></u-avatar>
			<view class="info">
				<!-- 给<view>标签设置open-type="getUserInfo"属性非常必要。 -->
				<!-- 因为该标签绑定了点击事件，当我们点击标签的时候，微信会弹出授权弹窗。 -->
				<!-- 如果用户同意授权，我们就能用JS语句获取到用户的微信资料和临时授权码。 -->
				<!-- 毕竟我们注册新用户的时候需要用到微信昵称、头像和性别。 -->
				<!-- 小程序中的点击事件叫tap -->
				<view v-if="flag == 'logout'" open-type="getUserInfo" @tap="loginOrRegister">
					<text class="operate">注册 / 登陆</text>
					<text class="remark">请登陆膳逸小程序</text>
				</view>
				<view v-if="flag == 'login'">
					<text class="username">{{ user.username }}</text>
					<text class="phone">{{ user.phone != null ? user.phone : '未绑定手机（需完善个人信息）' }}</text>
				</view>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="navigator-container">
			<!-- @click="navigatorHandle"为导航栏（其实只要是跳转到别的页面的按钮，都绑定这个通用的）点击事件回调函数 -->
			<u-grid :border="false" col="4" @click="navigatorHandle">
				<u-grid-item name="个人信息">
					<view class="navigator-icon"><view class="navigator-icon-1" /></view>
					<text class="title">个人信息</text>
				</u-grid-item>
				<u-grid-item name="我的健康">
					<view class="navigator-icon"><view class="navigator-icon-2" /></view>
					<text class="title">我的健康</text>
				</u-grid-item>
				<u-grid-item name="口味偏好">
					<view class="navigator-icon"><view class="navigator-icon-3" /></view>
					<text class="title">口味偏好</text>
				</u-grid-item>
				<u-grid-item name="我的收藏">
					<view class="navigator-icon"><view class="navigator-icon-4" /></view>
					<text class="title">我的收藏</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="publicity-container"><image :src="publicityBannerUrl" mode="widthFix" class="banner" /></view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			img: {
				'mine-icon-1': `${this.shanyiUrl}/page/mine/mine-icon-1.png`,
				'mine-icon-2': `${this.shanyiUrl}/page/mine/mine-icon-2.png`,
				'mine-icon-3': `${this.shanyiUrl}/page/mine/mine-icon-3.png`,
				'mine-icon-4': `${this.shanyiUrl}/page/mine/mine-icon-4.png`,
				'mine-icon-5': `${this.shanyiUrl}/page/mine/mine-icon-5.png`,
				'service-icon-1': `${this.shanyiUrl}/page/mine/service-icon-1.png`,
				'service-icon-2': `${this.shanyiUrl}/page/mine/service-icon-2.png`,
				'service-icon-3': `${this.shanyiUrl}/page/mine/service-icon-3.png`,
				'service-icon-4': `${this.shanyiUrl}/page/mine/service-icon-4.png`,
				'service-icon-5': `${this.shanyiUrl}/page/mine/service-icon-5.png`,
				'service-icon-6': `${this.shanyiUrl}/page/mine/service-icon-6.png`,
				'service-icon-7': `${this.shanyiUrl}/page/mine/service-icon-7.png`,
				'service-icon-8': `${this.shanyiUrl}/page/mine/service-icon-8.png`,
				'service-icon-9': `${this.shanyiUrl}/page/mine/service-icon-9.png`,
				'service-icon-10': `${this.shanyiUrl}/page/mine/service-icon-10.png`,
				'service-icon-11': `${this.shanyiUrl}/page/mine/service-icon-11.png`,
				'service-icon-12': `${this.shanyiUrl}/page/mine/service-icon-12.png`,
				'service-icon-13': `${this.shanyiUrl}/page/mine/service-icon-13.png`,
				'service-icon-14': `${this.shanyiUrl}/page/mine/service-icon-14.png`,
				'service-icon-15': `${this.shanyiUrl}/page/mine/service-icon-15.png`
			},
			flag: 'logout',
			code: null,
			user: {
				username: '',
				avatar: null,
				phone: null
			},
			bannerUrl: `${this.shanyiUrl}/banner/banner-5.jpg`,
			publicityBannerUrl: `${this.shanyiUrl}/banner/xuanchuan.png`,
			otherBannerUrl: `${this.shanyiUrl}/banner/banner-1.jpg`,
			adBannerUrl: [`${this.shanyiUrl}/banner/banner-8.jpg`, `${this.shanyiUrl}/banner/banner-5.jpg`]
		};
	},
	methods: {
		// 注册或登录
		loginOrRegister: function() {
			let that = this;
			// console.log('loginOrRegister');
			// console.log(that.api.loginOrRegister);
			
			// 获取微信用户的临时授权码
			// 调用uni中的内置方法login，传入provider和success回调函数
			// resp中的code就是临时授权码
			uni.login({
				provider: 'weixin',
				success: function(resp) {
					// console.log(resp.code);
					that.code = resp.code;
				}
			});
			
			// console.log("a");
			
			// 获取微信用户的资料，用于注册
			uni.getUserProfile({
				desc: '获取用户信息',
				success: function(resp) {
					// console.log("b");
					let info = resp.userInfo;
					let nickName = info.nickName;
					let avatar = info.avatarUrl;
					let sex = info.gender == 0 ? '男' : '女';
					let data = {
						code: that.code,
						nickName,
						avatar,
						sex
					};
					// console.log(data);
					
					// console.log(that);
					
					// 提交Ajax请求，执行登录或注册
					that.ajax(that.api.loginOrRegister, 'POST', data, function(resp) {
						// console.log(that.api.loginOrRegister);
						let msg = resp.data.msg;
						// console.log(that);
						// console.log(that.$refs);
						that.$refs.uToast.show({
							message: msg,
							type: 'success',
							duration: 1200,
							complete: function() {
								// console.log("c");
								
								let token = resp.data.token;
								// 把Token保存到本地存储Storage中
								uni.setStorageSync('token', token);
								// 更新页面标志位变量
								that.flag = 'login';
								// 更新用户信息
								that.user.username = nickName;
								that.user.avatar = avatar;
								// 如果用户创建了个人信息，就把电话显示在页面上
								if (resp.data.hasOwnProperty('phone')) {
									that.user.phone = resp.data.phone;
								}
								// console.log(resp.data);
							}
						});
					});
					
					// console.log("d");
					
				}
			});
		},
		
		// 导航栏点击事件
		navigatorHandle: function(name) {
			let token = uni.getStorageSync('token');
			console.log(token);
			// 跳转到别的页面之前，先判断一下用户是否登录
			if (token == null || token.length == 0) {
				uni.showToast({
					icon: 'error',
					title: '请先登录'
				});
				return;
			}
			
			// 跳转到别的页面
			let url = null;
			if (name == '个人信息') {
				url = '/user/fill_user_info/fill_user_info';
			}
			
			// TODO: 其他判断条件
			
			
			uni.navigateTo({
				url
			});
		},
			
		
	},
	onShow: function() {
		let that = this;
		let token = uni.getStorageSync('token');
		if (token != null) {
			that.ajax(that.api.searchUserSimpleInfoById, 'GET', {}, function(resp) {
				if (resp.data.hasOwnProperty('result')) {
					that.flag = 'login';
					let result = resp.data.result;
					that.user.username = result.nick_name;
					that.user.avatar = result.avatar;
					that.user.phone = result.phone;
				}
			}, false);
		}
	}
};
</script>

<style lang="less">
@import url(mine.less);
</style>
